<template>
	<div class="app-error-view">
		<div class="app-error-container">
			<img src="/assets/img/404.png" />
			<div class="error-text">
				<div class="error-text1">{{ $t('function.404.errortext1') }}</div>
				<div class="error-text2">
					{{ $t('function.404.errortext2') }}
					<a @click="gotoPage">{{ $t('function.404.indexpage') }}</a>
					{{ $t('function.404.continue') }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useAppStoreWithOut } from '@/store';
import { useRoute, useRouter } from 'vue-router';

const route: any = useRoute();
const { push } = useRouter();
onBeforeMount(() => {
	const loadingElement = document.getElementById('app-loading-x');
	if (loadingElement) {
		loadingElement.style.display = 'none';
	}
});
const gotoPage = () => {
	const { historyPathList, pageMetas } = useAppStoreWithOut();
	const length = historyPathList.length;
	if (length > 0) {
		const path = historyPathList[length - 1];
		if (Object.is(path, route.fullPath)) {
			return;
		}
		const index = pageMetas.findIndex((page: any) =>
			Object.is(page.fullPath, path)
		);
		if (index >= 0) {
			const page = pageMetas[index];
			push({
				path: page.fullPath,
			});
		}
	} else {
		const appConfig = App.getAppConfig();
		let path: string | null = window.sessionStorage.getItem(appConfig.appName);
		if (path) {
			push({ path: path });
		} else {
			push('/');
		}
	}
};
</script>
